﻿    <div class="ui-widget ui-corner-all">
        <div class="ui-widget-header">
           Account Management
        </div>
        <div class="ui-widget-content">
           
            
            <div class="ui-widget ui-corner-all" style="width: 300px;">
                <div class="ui-widget-header">
                    <span class="ui-icon ui-icon-plus ilb" /><span class="ui-icon ui-icon-person ilb" />Add User 
                </div>
                <div class="ui-widget-content my-form" id="AddUserForm">
                    <table>
                        <tr>
                            <th>Username: </th>
                            <td><input type="text" id="Username" /></td>
                        </tr>
                        <tr>
                            <th>Password: </th>
                            <td><input type="password" id="Password1" /></td>
                        </tr>
                        <tr>
                           <th> Retype Password: </th>
                            <td><input type="password" id="Password2" /></td>
                        </tr>
                        <tr>
                           <th> Domain User: </th>
                            <td><input type="text" id="DomainUser" /></td>
                        </tr>
                        <tr>
                           <th> Email: </th>
                            <td><input type="email" id="Email" /></td>
                        </tr>
                        <tr>
                           <th>Pushover User Key: </th>
                            <td><input type="text" id="PushoverUserKey" /></td>
                        </tr>

                        <tr class="my-button-row">
                            <td colspan="2">
                                    <span class="my-button" icon="ui-icon-disk" onclick="TrySaveAddUser();">Save</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            

        </div>
    </div>


<script type="text/javascript">

    ///<reference path="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
    ///<reference path="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
    ///<reference path="js/lib.js" />
    ///<reference path="js/md5.js" />

    $(document).ready(function ()
    {
        console.log("settings");
               
    });

    function LoadUsersTable()
    {
        GetJsonSproc("usp_GetUsers", {}, function (json)
        {
            $("#UsersListTable tbody").empty();

            var t = $("#UsersListTable tbody:first");

            $.each(json, function (key, value)
            {
                t.append("<tr><td><span class='ui-icon ui-icon-person clickable'/>" +
                        "</td><td>" + value["Username"] +
                        "</td><td>" + value["DomainUser"] +
                        "</td><td>" + value["Email"] +
                        "</td><td>" + value["PushoverKey"] +
                        "</td></tr>");
            });

            $("#UsersList").append(t);

        });
    }

   

    function ValidateAddUserForm()
    {
        var isValid = true;
        $("#AddUserForm input").removeClass("ui-state-error");

        if (FieldIsEmpty("#Password1"))
            isValid = false;

        if (FieldIsEmpty("#Username"))
            isValid = false;

        if (FieldIsEmpty("#Email"))
            isValid = false;

        if ($("#Password1").val() != $("#Password2").val())
        {
            isValid = false;
            $("#Password1, #Password2").addClass("ui-state-error");
        }
        
        return isValid;
    }

    function TrySaveAddUser()
    {
        if (ValidateAddUserForm())
        {
            GetJsonSproc("usp_AddGalacticUser",
                {
                    Username: $("#Username").val(),
                    PasswordHash: CryptoJS.MD5($("#Password1").val()).toString(),
                    Email: $("#Email").val(),
                    PushoverKey: $("#PushoverUserKey").val(),
                    DomainUser: $("#DomainUser").val()
                },
                function ()
                {
                    $("#AddUserForm input").val("");
                    LoadUsersTable();
                    alert("Add Success");
                });
        }
    }

</script>